Why

當網站架構龐大後，會造成 router.js 檔案巨大，引入的元件眾多而難以管理。
切割檔案再進行引用，會使路徑較易管理搜尋。

Vue-Cli 模板範例

Github Repo Link

router.js

• 注意!!!! 此作法只是將內容分成兩個檔案，所以命名有可能會造成衝突的，建議自行加上前綴以避免衝突

import Vue from 'vue'
import Router from 'vue-router'

// 引用其他 router 檔案
import fin_Routes from './routes/finReportRoutes'
import baseRoutes from './routes/baseRoutes'

Vue.use(Router)

export default new Router({
  routes: [
    // ES6 rest parameter 會將兩個陣列合併
    ...baseRoutes,
    ...fin_Routes
  ],
})

切割的 Route 檔案

• 切割的檔案 name 最好加上前墜，以避免衝突

import FinReportPage from '@/views/fin-report/FinReportPage'

export default [
  {
    path: '/fin-report',
    name: 'fin-report',
    component: FinReportPage,
  },
]

參考資料

• StackOverFlow